<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/css/jquery.contextMenu.min.css" rel="stylesheet"/>
    <link href="/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="/css/animate.css" rel="stylesheet"/>
    <link href="/css/style.css" rel="stylesheet"/>
    <link href="/css/skins.css" rel="stylesheet"/>
    <link href="/ruoyi/css/ry-ui.css?v=4.3.1" rel="stylesheet"/>
    <style type="text/css">
        html,body{
           background-color:  #efeff4;
            padding: 0px;
            margin: 0px;
            font-family:Helvetica;
            color: #000;
        }

        .head{
            width: 100%;
            height: 44px;
            background-color: #fff;
            color: #000;
            font-size: 14px;
            display:flex;
            display: -webkit-flex;
            -webkit-flex-direction:row;
            line-height: 44px;
        }
        .a,.c{
            width:22px;
            float: right;
            margin-right: 0px;
            margin-left: 2px;
        }
        .b {
            flex:1;
            text-align: center;
            font-size: 16px;
            font-weight: 400;
            line-height: 44px;
            white-space: nowrap;
            color: #000;
        }
        .arrow{
            line-height: 34px;
            ont-family: Muiicons;
            font-size: 24px;
            font-weight: 400;
            font-style: normal;
            display: inline-block;
            text-decoration: none;
            -webkit-font-smoothing: antialiased;
        }
        p{
            font-size: 14px;
            padding-left: 10px;
            padding-bottom: 5px;
            margin-top: 10px;
        }
        .content-ul{
            font-size: 14px;
            padding-left: 10px;
            margin-top: 10px;
            height: 20px;
        }
        li{
            list-style: none;
        }
        .content{
            float: left;
        }
        hr{
            border: 0px;
            border-bottom: 1px dotted #ecdede;
            margin-top: -10px;
        }
        .xing{
            color: red;
            font-size: 2px;
        }
        .describe{
            font-size: 12px;
            color: #bbb;
            padding-left: 20px;

        }
        .user-img{
            width:120px;
            height:146px;
            position: relative;
            margin-top: 10px;
            margin-left: 10px;
        }
        .avatar-img{
            width:120px;
            height:130px;
            overflow: hidden;
            display: block;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            margin:0 auto;
        }
        .avatar-img img{
            width:120px;
            height:130px;
        }
        a{
            text-decoration: none;
        }
        .add-img{
            width:120px;
            height:130px;
            line-height: 130px;
            font-size: 26px;
            text-align:center;
            color: #bbb;
            position: absolute;
            top: 0px;
            background-color: #fff;
        }
        .referTo{
            text-align: center;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div id="story">

        <div class="head">
            <div class="a" onclick="goback()"><span class="fa arrow"></span></div>
            <div class="b">小事说</div>
            <div class="c" onclick="reload()"><i class="glyphicon glyphicon-refresh icon-refresh"></i></div>
        </div>
        <div class="content-img" style="margin-top: 10px">
        </div>
        <p style="font-size: 15px;padding-left: 10px;color: #6d6d72;">我要参与</p>
        <hr/>
        <ul class="content-ul">
            <li class="content">Q1. 你想反映的问题是？ </li>
            <i class="fa fa-star xing"></i>
        </ul>
        <div class="col-sm-10" style="padding-left: 10px;padding-right: 10px">
            <input type="text" class="form-control" name="problem" id="problem">
        </div>
        <ul class="content-ul">
            <li class="content">Q2. 你觉得合理的解决方案是？ </li>
            <i class="fa fa-star xing"></i>
        </ul>
        <div class="col-sm-10" style="padding-left: 10px;padding-right: 10px;">
            <input type="text" class="form-control" name="programme" id="programme">
        </div>
        <ul class="content-ul" style="margin-bottom: 0px">
            <li class="content">Q3. 相关信息上传？ </li>
            <i class="fa fa-star xing"></i>
        </ul>
        <span class="describe">支持 jpg,png,gif,bmp,qsd,tiff等图片格式</span>
        <div class="user-img">
            <p class="avatar-img">
                <a href="#" class="add-img">
                    +
                </a>
                <img class="middleFace" id="showimg" src="" alt="" style="position: absolute;top: 0px;">
                <input class="addwordExperience" id="file" onchange="changepic(this)" name="imageFile" type="file" style="height: 90px;width: 120px;opacity:0;"/>
            </p>
        </div>
        <p style="padding-left: 10px">Q4. 备注</p>
        <div class="col-sm-10" style="padding-left: 10px;padding-right: 10px">
            <input type="text" placeholder="如果问题已经描述完毕, 你可以夸夸小姐姐" class="form-control" name="remarks" id="remarks">
        </div>
        <div class="referTo">
            <i></i> 实名提交：
            <div class="radio check-box" style="padding-top: 0px;padding-right: 0px">
                <label>
                    <input type="radio" value="1" name="a"></label>
            </div>
            <i></i> 匿名提交：
            <div class="radio check-box" style="padding-top: 0px;padding-right: 0px">
                <label>
                    <input type="radio" checked="" value="2" name="a"></label>
            </div>
        </div>
        <span class="describe" style="text-align: center;display: block">( "小事说" 将在问题提交后的<span style="color: red">次工作日</span>与你联系。)</span>
        <p style="margin-left: 30px;margin-right: 30px;margin-top: 40px;">
            <button type="button" class="btn btn-w-m btn-primary btn-block" onclick="storyInsert()">提交</button>
            <button type="button" class="btn btn-w-m btn-primary btn-block" onclick="MyStory()" style="background: #f8ac59;color: #555;border-color: #f8ac59">我的小事说</button>
        </p>
    </div>
</body>
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/ajax/libs/bootstrap-table/bootstrap-table.min.js?v=20200529"></script>
<script src="/ajax/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/ajax/libs/bootstrap-table/extensions/mobile/bootstrap-table-mobile.js"></script>
<script src="/ajax/libs/bootstrap-table/extensions/toolbar/bootstrap-table-toolbar.min.js"></script>
<script src="/ajax/libs/bootstrap-table/extensions/columns/bootstrap-table-fixed-columns.js"></script>
<script src="/ajax/libs/validate/jquery.validate.min.js"></script>
<script src="/ajax/libs/validate/messages_zh.min.js"></script>
<script src="/ajax/libs/validate/jquery.validate.extend.js"></script>
<script src="/ajax/libs/bootstrap-treetable/bootstrap-treetable.js"></script>
<script src="/ajax/libs/bootstrap-table/extensions/export/bootstrap-table-export.js"></script>
<script src="/ajax/libs/bootstrap-table/extensions/export/tableExport.js"></script>
<script src="/ajax/libs/blockUI/jquery.blockUI.js"></script>
<script src="/ajax/libs/iCheck/icheck.min.js"></script>
<script src="/ajax/libs/layer/layer.min.js"></script>
<script src="/ajax/libs/layui/layui.js"></script>
<script src="/ruoyi/js/common.js?v=4.3.1"></script>
<script src="/ruoyi/js/ry-ui.js?v=4.3.1"></script>
<script> var ctx = "\/"; </script>
<script src="/js/js_api.js"></script>
<script type="text/javascript">


    window.onload = function(){
        getUserInfo();
    }


    function getUserInfo() {
        //调用获取用户信息
        window.jsApi.getUserInfo()
            .then(res => {
                console.log(user);
                document.getElementById("content").innerHTML=res.msg+"用户名称："+res.result.XM;
            })
            .catch(err => {alert(err)});
    }

    function changepic() {

        var reads= new FileReader();

        f=document.getElementById('file').files[0];

        console.log(f);

        reads.readAsDataURL(f);

        reads.onload=function (e) {
            document.getElementById('showimg').src=this.result;
            content.imgshow = true;
        };

    }
    function storyInsert(){

        var prefix = ctx + "story/story";
        var options;
        window.jsApi.getUserInfo()
            .then(res => {
                console.log(user);
                options = {
                    problem: $("#problem").val(),
                    programme: $("#programme").val(),
                    pic: "",
                    remarks: $("#remarks").val(),
                    referState: $(':radio[name="a"]:checked').val(),
                    studentId: res.result.KEY_ID
                };
            })
            .catch(err => {alert(err)});
        // $.operate.save(prefix + "/insert", options);
        // // $.table.init(options);
        // alert("12131x`")
        var config = {
            url: prefix + "/insert",
            type: "post",
            dataType: "json",
            data: options,
            // beforeSend: function () {
            //     $.modal.loading("正在处理中，请稍后...");
            // },
            success: function(result) {
                $.modal.closeLoading();
                $.modal.enable();
                $.modal.msgSuccess('提交成功');
                setTimeout( function(){
                    window.location.href=ctx + "story/progress?id="+result;
                }, 1 * 700 );
                // if (typeof callback == "function") {
                //     callback(result);
                // }
                // $.operate.successCallback(result);
            }
        };
        $.ajax(config);
    }
    function goback() {
        window.history.back(-1);
    }
    function reload() {
        window.location.reload()
    }
    function MyStory() {
        window.location.href="http://localhost:8081/story/storylist";
    }
    // var form = new Vue({
    //     el:'#story',
    //     data:{
    //         form:{
    //             userName: '',
    //             userPass: ''
    //         }
    //     },
    //     methods:{
    //         // login : function () {
    //         //     this.$http.post(this.url, this.form).then((message) => {
    //         //         alert("success");
    //         //     }).
    //         //     catch((message) => {
    //         //         alert("false");
    //         //     });
    //         // }
    //     }
    // });
</script>

</html>